{% extends "base.html" %}

{% block title %}教师数据大屏 - 教育管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <h1 class="text-center mb-4">教师数据大屏</h1>

    <div class="row">
        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">课程平均分</h5>
                </div>
                <div class="card-body">
                    <div id="course-chart" class="chart-container"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">考试次数平均分</h5>
                </div>
                <div class="card-body">
                    <div id="test-chart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">成绩分布</h5>
                </div>
                <div class="card-body">
                    <div id="distribution-chart" class="chart-container"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card dashboard-card">
                <div class="card-header bg-warning">
                    <h5 class="card-title mb-0">成绩趋势</h5>
                </div>
                <div class="card-body">
                    <div id="trend-chart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card dashboard-card">
                <div class="card-header bg-dark text-white">
                    <h5 class="card-title mb-0">学生表现概览</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="performance-table">
                            <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>年级</th>
                                    <th>平均分</th>
                                    <th>最高分</th>
                                    <th>最低分</th>
                                    <th>考试次数</th>
                                </tr>
                            </thead>
                            <tbody id="student-performance-body">
                                <!-- 动态加载数据 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 初始化ECharts实例
    const courseChart = echarts.init(document.getElementById('course-chart'));
    const testChart = echarts.init(document.getElementById('test-chart'));
    const distributionChart = echarts.init(document.getElementById('distribution-chart'));
    const trendChart = echarts.init(document.getElementById('trend-chart'));
    
    window.addEventListener('resize', function() {
        courseChart.resize();
        testChart.resize();
        distributionChart.resize();
        trendChart.resize();
    });
    
    // 加载课程平均分数据
    function loadCourseData() {
        fetch('/api/scores/overview')
            .then(response => response.json())
            .then(data => {
                const courseOption = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.course_avg.map(item => item.name),
                        axisLabel: {
                            rotate: 45
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100
                    },
                    series: [
                        {
                            name: '平均分',
                            type: 'bar',
                            data: data.course_avg.map(item => item.value),
                            itemStyle: {
                                color: function(params) {
                                    const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
                                    return colors[params.dataIndex % colors.length];
                                }
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c} 分'
                            }
                        }
                    ]
                };
                courseChart.setOption(courseOption);
                
                const testOption = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.test_avg.map(item => item.name)
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100
                    },
                    series: [
                        {
                            name: '平均分',
                            type: 'line',
                            data: data.test_avg.map(item => item.value),
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最高分' },
                                    { type: 'min', name: '最低分' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                testChart.setOption(testOption);
            });
    }
    
    // 加载成绩分布数据
    function loadDistributionData() {
        fetch('/api/scores/distribution')
            .then(response => response.json())
            .then(data => {
                const option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: data.distribution.map(item => item.name)
                    },
                    series: [
                        {
                            name: '成绩分布',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: data.distribution.map(item => {
                                return {
                                    value: item.value,
                                    name: item.name
                                };
                            })
                        }
                    ]
                };
                distributionChart.setOption(option);
            });
    }
    
    // 加载成绩趋势数据
    function loadTrendData() {
        fetch('/api/scores/trend')
            .then(response => response.json())
            .then(data => {
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: data.series.map(item => item.name),
                        type: 'scroll',
                        orient: 'horizontal',
                        top: 0
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.categories
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100
                    },
                    series: data.series.map(item => {
                        return {
                            name: item.name,
                            type: 'line',
                            data: item.data,
                            connectNulls: true
                        };
                    })
                };
                trendChart.setOption(option);
            });
    }
    
    // 加载学生表现数据
    function loadStudentPerformance() {
        fetch('/api/student/performance')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('student-performance-body');
                tableBody.innerHTML = '';
                
                data.students.forEach(student => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.grade}</td>
                        <td>${student.avg_score}</td>
                        <td>${student.max_score}</td>
                        <td>${student.min_score}</td>
                        <td>${student.score_count}</td>
                    `;
                    tableBody.appendChild(row);
                });
            });
    }
    
    // 页面加载时加载所有数据
    document.addEventListener('DOMContentLoaded', function() {
        loadCourseData();
        loadDistributionData();
        loadTrendData();
        loadStudentPerformance();
    });
</script>
{% endblock %} 